<template>
	<div>
		<el-form label-width="60px" :show-message="false">
			<el-row>
				<el-col :span="24">
					<el-form-item class="margin-bottom-4" label="点位:">
						<div class="flex-start-center-wrap" style="max-height: 100px;overflow: auto;">
							<div
								v-for="(item, index) in checkArr"
								:key="index"
								style="width: calc(100% / 8);padding: 2px;box-sizing: border-box;"
							>
								<el-tag class="width-100-percent flex-between-center" :closable="true" @close="onDeleteSignalBtn(index)">
									<span class="text-ellipsis" style="width: 86%;">{{ item.signalName || '无' }}</span>
								</el-tag>
							</div>

							<el-popover trigger="click">
								<div class="flex-end-center margin-bottom-4">
									<jk-search-input v-model="queryVal" placeholder="点位名称" class="search-bar-item-size2 item-gap" @on-enter="onSearchBtnOfSignal"></jk-search-input>
									<jk-search-button @click="onSearchBtnOfSignal"></jk-search-button>
								</div>
								<div style="width: 800px;background: #f8f8f9;padding: 10px;box-sizing: border-box;border: solid 1px #e8eaec;border-radius: 6px;">
									<div style="height: 400px;overflow: auto;">
										<el-button-group size="mini">
											<el-button
												v-for="(item) in signalList || []"
												:key="item.signalId"
												:label="item.signalName"
												:type="checkArr.find(x => x.signalId === item.signalId) ? 'primary' : ''"
												size="mini"
												style="width: calc(100% / 7);box-sizing: border-box;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;"
												@click="onSelectSignalChange(item)"
											>{{ item.signalName }}</el-button>
										</el-button-group>
									</div>
								</div>
								<div slot="reference" style="padding: 2px;box-sizing: border-box;cursor: pointer;">
									<el-tag class="width-100-percent flex-center" type="info">
										<span class="el-icon-plus"></span>
									</el-tag>
								</div>
							</el-popover>
						</div>
					</el-form-item>
				</el-col>
				<el-col :span="24">
					<el-form-item class="margin-bottom-0" label="日期:">
						<div class="flex-between-center">
							<div class="flex-start-center">
								<jk-button type="default" icon="el-icon-arrow-left" size="small" class="item-gap" @click="onGoDateChange(-1)"></jk-button>
								<el-popover trigger="click">
									<jk-date-picker v-model="selectBelongDate" class="search-bar-item-size2" @change="splitTime"></jk-date-picker>
									<jk-button slot="reference" type="primary" size="small" class="item-gap">{{ selectBelongDate }}</jk-button>
								</el-popover>
								<jk-button type="default" icon="el-icon-arrow-right" size="small" @click="onGoDateChange(1)"></jk-button>
							</div>
							<!--<el-radio-group v-model="selectDateType" size="small" class="item-gap" @change="onDateTypeChange">
                                <el-radio-button
                                    v-for="(dateTypeItem) in dateTypeList"
                                    :key="dateTypeItem.id"
                                    :label="dateTypeItem.id"
                                >{{ dateTypeItem.name }}</el-radio-button>
                            </el-radio-group>-->
						</div>
					</el-form-item>
				</el-col>
				<el-col :span="24">
					<el-form-item class="margin-bottom-4" label="小时:">
						<el-radio-group v-model="selectHours" size="small" @change="splitTime">
							<el-radio-button
								v-for="(item, index) in hoursTypeList || []"
								:key="index"
								:label="item.id"
							>{{ `${item.start}~${item.end}` }}</el-radio-button>
						</el-radio-group>
					</el-form-item>
				</el-col>
				<el-col :span="24">
					<el-form-item class="margin-bottom-0" label="分钟:">
						<el-radio-group v-model="selectMinus" size="small" @change="splitTime">
							<el-radio-button
								v-for="(item, index) in minusTypeList || []"
								:key="index"
								:label="item.id"
							>{{ `${item.start}~${item.end}` }}</el-radio-button>
						</el-radio-group>
					</el-form-item>
				</el-col>
			</el-row>
		</el-form>
	</div>
</template>
<script>
    import { formatDate } from '../../../../utils/jk/jk-tool';

    export default {
        props: {
            defaultList: {
                type: Array,
                default() {
                    return [];
                }
            },
            optionList: {
                type: Array,
                default() {
                    return [];
                }
            }
        },
        data() {
            return {
                signalList: [],
                queryVal: '',
                selectBelongDate: '',
                selectDateType: 0,
                selectMinus: 1,
                selectHours: 1,
                checkArr: [],
                dateTypeList: [
                    { id: 0, name: '今天' },
                    { id: 1, name: '昨天' },
                    { id: 2, name: '前天' }
                ],
                hoursTypeList: [
                    { id: 1, start: '00', end: '02' },
                    { id: 2, start: '03', end: '05' },
                    { id: 3, start: '06', end: '08' },
                    { id: 4, start: '09', end: '11' },
                    { id: 5, start: '12', end: '14' },
                    { id: 6, start: '15', end: '17' },
                    { id: 7, start: '18', end: '20' },
                    { id: 8, start: '21', end: '23' }
                ],
                minusTypeList: [
                    { id: 1, start: '00', end: '00' },
                    { id: 2, start: '15', end: '15' },
                    { id: 3, start: '30', end: '30' },
                    { id: 4, start: '45', end: '45' }
                ]
            };
        },
        methods: {
            onDeleteSignalBtn(index) {
                if (this.checkArr.length > 1) {
                    this.checkArr.splice(index, 1);
                }
                this.splitTime();
            },
            onDateTypeChange(e) {
                this.selectBelongDate = formatDate(Date.now() - (e * 24 * 60 * 60 * 1000));
                this.splitTime();
            },
            onGoDateChange(e) {
                this.selectBelongDate = formatDate(Date.parse(this.selectBelongDate) + (e * 24 * 60 * 60 * 1000));
                this.splitTime();
            },
            onSearchBtnOfSignal() {
                this.signalList = this.optionList.filter(x => x.signalName.indexOf(this.queryVal) !== -1);
            },
            onSelectSignalChange(e) {
                const has = this.checkArr.some(x => x.signalId === e.signalId);
                if (has) {
                    this.checkArr = this.checkArr.filter(x => x.signalId !== e.signalId);
                } else {
                    this.checkArr.push(e);
                }
                this.splitTime();
            },
            splitTime() {
                const startStr = `${this.selectBelongDate} ${this.hoursTypeList.find(x => x.id === this.selectHours) ? this.hoursTypeList.find(x => x.id === this.selectHours).start : '00'}:${this.hoursTypeList.find(x => x.id === this.selectHours) ? this.minusTypeList.find(x => x.id === this.selectMinus).start : '00'}:00`;
                const endStr = `${this.selectBelongDate} ${this.hoursTypeList.find(x => x.id === this.selectHours) ? this.hoursTypeList.find(x => x.id === this.selectHours).end : '00'}:${this.minusTypeList.find(x => x.id === this.selectMinus) ? this.minusTypeList.find(x => x.id === this.selectMinus).end : '00'}:00`;
                this.$emit('on-return', this.checkArr ? JSON.parse(JSON.stringify(this.checkArr)) : [], [startStr, endStr]);
            }
        },
        mounted() {
            this.selectBelongDate = formatDate(Date.now());
        },
        watch: {
            optionList: {
                handler(newVal) {
                    this.signalList = newVal ? JSON.parse(JSON.stringify(newVal)) : [];
                },
                deep: true,
                immediate: true
            },
            defaultList: {
                handler(newVal) {
                    this.checkArr = newVal ? JSON.parse(JSON.stringify(newVal)) : [];
                },
                deep: true,
                immediate: true
            }
        }
    };
</script>
